<script>
import {documentGetId, getDocumentList, getUserAll, handleDelete, submitForm, updateForm} from '@/api/Document/table'
import con from 'js-cookie'
import th from "element-ui/src/locale/lang/th";

export default {
  computed: {
    th() {
      return th
    }
  },
  data() {
    return {
      total: 0,
      listShow: true,
      PostDate: new Date(),
      pages: 0,
      pageSize: 5,
      pageNum: 1,
      userList: [],
      list: [],
      addDocumentsList: {},
      updateDocumentsList: [],
      documentVo: {
        title: null,
        userName: null,
        expirationDate1: null,
        expirationDate2: null
      },
      documentsVo: [],
      addlistLoading: false,
      updatelistLoading: false,
      listLoading: true,
      cons: JSON.parse(con.get("SET_USERS")),
      rules: {
        title: [
          { required: true, message: '名称为必填项', trigger: 'blur' },
          { min: 2, max: 10, message: '名称长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        documentType: [
          { required: true, message: '类型为必填项', trigger: 'blur' }
        ]
      },
    }
  },
  created() {
    this.getUserAll();
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      this.addlistLoading = false;
      this.updatelistLoading = false;
      if (this.documentVo.expirationDate1 != null) {
        var date = new Date(this.documentVo.expirationDate1);
        this.documentVo.expirationDate1 = date.getFullYear() + "-"
          + (date.getMonth() + 1) + "-" + date.getDate() + " "
          + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
      }
      if (this.documentVo.expirationDate2 != null) {
        var date2 = new Date(this.documentVo.expirationDate2);
        this.documentVo.expirationDate2 = date2.getFullYear() + "-"
          + (date2.getMonth() + 1) + "-" + date2.getDate() + " "
          + date2.getHours() + ":" + date2.getMinutes() + ":" + date2.getSeconds()
      }
      getDocumentList(this.pageNum, this.pageSize, this.documentVo).then(response => {
        console.log(response)
        this.total = response.data.total
        this.pages = response.data.pages
        this.list = response.data.list
        this.listLoading = false;
      })
    },
    getUserAll() {
      getUserAll().then(response => {
        this.userList = response.data
      })
    },
    handleDelete(recycleID) {
      if (confirm("是否删除")) {
        handleDelete(recycleID, this.cons.userID).then(data => {
          console.log(data)
          if (data.data.result) {
            alert("删除成功")
          } else {
            alert("删除失败")
          }
          this.fetchData();
        })
      }
    },
    qx() {
      this.addlistLoading = false;
      this.updatelistLoading = false;
      this.titlelistLoading = false;
      this.listShow = true;
      this.fetchData()
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.fetchData();
    },
    documentGetId(id) {
      this.listShow = false;
      this.addlistLoading = false;
      this.titlelistLoading = false;
      this.updatelistLoading = true;
      documentGetId(id).then(data => {
        this.updateDocumentsList = data.data
        console.log(this.updateDocumentsList)
      })
    },
    updateForm() {
      if (this.updateDocumentsList.expirationDate != null) {
        var date = new Date(this.updateDocumentsList.expirationDate);
        this.updateDocumentsList.expirationDate = date.getFullYear() + "-"
          + (date.getMonth() + 1) + "-" + date.getDate() + " "
          + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
      }
      updateForm(this.updateDocumentsList).then(data => {
        console.log(data)
        if (data.data.result) {
          alert("修改成功")
        } else {
          alert("修改失败")
        }
        window.location.reload();
      })
    },
    tj() {
      this.addDocumentsList.userName = this.cons.userName
      this.addDocumentsList.documentDate = this.PostDate
      this.addlistLoading = true;
      this.listShow = false;
      this.updatelistLoading = false;
      this.titlelistLoading = false;
      console.log(this.addDocumentsList.documentDate)
      console.log(this.addDocumentsList.userName)
      console.log(this.addDocumentsList)
    },
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          if (this.addDocumentsList.documentDate != null) {
            var date = new Date(this.addDocumentsList.documentDate);
            this.addDocumentsList.documentDate = date.getFullYear() + "-"
              + (date.getMonth() + 1) + "-" + date.getDate() + " "
              + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
          }
          submitForm(this.addDocumentsList).then(data => {
            console.log(data)
            if (data.data.result) {
              alert("新增成功")
            } else {
              alert("新增失败")
            }
            window.location.reload();
          })
        }else {
          alert("新增失败")
          return false;
        }
      })
    },
  }
}
</script>

<template>
  <div class="app-container">
    <div v-show="listShow">
      <el-button @click="tj()" v-show="listShow">添加文件</el-button>
      <span style="margin-left: 10px;">文件名：</span>
      <el-input
        v-model="documentVo.title"
        type="text"
        style="width: 150px;"
        placeholder="请输入文件名"
        autocomplete="off"
      />
      <span style="margin-left: 10px;">所有者：</span>
      <el-input
        v-model="documentVo.userName"
        type="text"
        style="width: 150px;"
        placeholder="请输入所有者"
        autocomplete="off"
      />

      <span style="margin-left: 10px;">创建日期：</span>
      <el-date-picker
        v-model="documentVo.expirationDate1"
        style="width: 200px;"
        type="datetime"
        placeholder="过期日期"
      />
      &nbsp;&nbsp;&nbsp;
      <el-date-picker
        v-model="documentVo.expirationDate2"
        style="width: 200px;"
        type="datetime"
        placeholder="过期日期"
      />
      &nbsp;&nbsp;&nbsp;
      <el-button @click="fetchData()">查询</el-button>
    </div>
    <el-table
      style="margin-top: 10px;"
      v-loading="listLoading"
      v-show="listShow"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="名称">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.documentType }}
        </template>
      </el-table-column>
      <el-table-column label="所有者" align="center">
        <template slot-scope="scope">
          {{ scope.row.userName }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="创建时间">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.documentDate }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="small"
            @click="documentGetId(scope.row.documentID)">
            修改
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row.documentID)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-show="listShow"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.pageNum"
      :page-size="this.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total"
      :page-sizes="[5, 10, 20]"
    />


    <!-- 修改 -->
    <el-form
      v-model="updateDocumentsList"
      v-show="updatelistLoading"
      label-width="auto"
      style="max-width: 600px;margin-top: 10px">

      <el-form-item
        label="名称"
        prop="id"
      >
        <el-input
          v-model="updateDocumentsList.title"
          type="text"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item
        label="类型"
      >
        <el-radio-group v-model="updateDocumentsList.documentType">
          <el-radio :label="'手册'" :value="手册">手册</el-radio>
          <el-radio :label="'报告'" :value="报告">报告</el-radio>
          <el-radio :label="'计划书'" :value="计划书">计划书</el-radio>
          <el-radio :label="'分析'" :value="分析">分析</el-radio>
          <el-radio :label="'记录'" :value="记录">记录</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        label="所有者"
        prop="transactionprice"
      >
        <el-input
          v-model="updateDocumentsList.userName"
          disabled="disabled"
          type="text"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item
        label="创建时间">
        <el-date-picker
          v-model="updateDocumentsList.documentDate"
          disabled="disabled"
          type="datetime"
          placeholder="创建时间"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="danger" @click="updateForm()">修改</el-button>
        <el-button @click="qx()">返回</el-button>
      </el-form-item>

    </el-form>

    <!-- 新增 -->
    <el-form
      :model="addDocumentsList"
      :rules="rules"
      ref="formRef"
      v-show="addlistLoading"
      label-width="auto"
      style="max-width: 600px;margin-top: 10px">

      <el-form-item
        label="名称"
        prop="title"
      >
        <el-input
          v-model="addDocumentsList.title"
          type="text"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item
        label="类型"
        prop="documentType"
      >
        <el-radio-group v-model="addDocumentsList.documentType">
          <el-radio :label="'手册'" :value="手册">手册</el-radio>
          <el-radio :label="'报告'" :value="报告">报告</el-radio>
          <el-radio :label="'计划书'" :value="计划书">计划书</el-radio>
          <el-radio :label="'分析'" :value="分析">分析</el-radio>
          <el-radio :label="'记录'" :value="记录">记录</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        label="所有者"
        prop="userName"
      >
        <el-input
          v-model="addDocumentsList.userName"
          disabled="disabled"
          type="text"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item
        label="创建时间"
        prop="documentDate"
      >
        <el-date-picker
          v-model="addDocumentsList.documentDate"
          disabled="disabled"
          type="datetime"
          placeholder="创建时间"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="danger" @click="submitForm()">新增</el-button>
        <el-button @click="qx()">返回</el-button>
      </el-form-item>

    </el-form>

  </div>


</template>

<style scoped lang="scss">

</style>
